<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="修改房源"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div class="info">
      产权信息
      <span>(房地产权属证书/购房合同或其他证明材料)</span>
    </div>
    <div class="picup">
      <van-uploader
        v-model="fileList"
        accept="image/*"
        :max-count="1"
        :after-read="afterRead"
      />
    </div>
    <div class="cut" />
    <div class="info">
      身份证
      <span>(身份证信息需和产权所有人信息一致)</span>
    </div>
    <div v-show="pass" class="picup">
      <div ref="idcard" class="idcardup">
        <van-uploader
          v-model="fileList2"
          accept="image/*"
          :max-count="1"
          :after-read="afterRead2"
        />
      </div>
    </div>
    <div v-show="!pass" class="passreal">实名认证已通过</div>
    <div class="cut" />
    <div class="houseinfo">
      <div class="headinfo">房屋信息</div>
      <div class="detailinfo">
        <span>*</span>
        <div class="tword">小区名字</div>
        <van-field v-model="housemsg.subdistrict" placeholder="请填写" />
      </div>
      <div class="detailinfo">
        <span>*</span>
        <div class="tword">地区选择</div>
        <van-cell is-link @click="showarea = true">{{ valuearea }}</van-cell>
      </div>
      <div class="detailinfo">
        <span>*</span>
        <div class="tword">房屋户型</div>
        <van-cell is-link @click="showPopup1">{{ value1 }}</van-cell>
      </div>
      <div class="detailinfo">
        <span>*</span>
        <div class="tword">房屋楼层</div>
        <van-cell is-link @click="showPopup2">{{ value2 }}</van-cell>
      </div>
      <div class="detailinfo">
        <span>*</span>
        <div class="tword">有无电梯</div>
        <van-cell is-link @click="showPopup3">{{ value3 }}</van-cell>
      </div>
      <!-- <div class="detailinfo">
        <span>*</span>
        <div class="tword">出租方式</div>
        <van-cell is-link>{{ value4 }}</van-cell>
      </div> -->
      <div :style="showmoney()" class="detailinfo">
        <span>*</span>
        <div class="tword">付款方式</div>
        <van-cell is-link @click="showPopup5">{{ value5 }}</van-cell>
      </div>
      <div :style="showmoney()" class="detailinfo">
        <span>*</span>
        <div class="tword">租金</div>
        <van-field
          v-model="housemsg.price"
          placeholder="请填写(元/月)"
          type="digit"
        />
        <span class="dw">元</span>
      </div>
      <div class="detailinfo other">
        <span>*</span>
        <div class="tword">房屋面积</div>
        <van-field
          v-model="housemsg.houseAcre"
          placeholder="请填写"
          type="number"
        />
        <span class="dw">m<span class="up">2</span></span>
      </div>
    </div>
    <div class="cut" />
    <div class="info"><span class="haveto">*</span>房屋照片</div>
    <div class="wword">
      <div>1.请上传清晰的房屋照片</div>
      <div>2.细节图可随意上传，限15张</div>
    </div>
    <div class="picup">
      <van-uploader
        v-model="fileList3"
        :max-count="15"
        :after-read="afterRead3"
        @delete="deleteimg3"
      />
    </div>
    <div class="cut" />
    <div class="info">房屋视频（选填）</div>
    <div class="wword">
      <div>请拍摄房间细节视频</div>
    </div>
    <div class="picup">
      <van-uploader
        v-model="videolist1"
        :max-count="1"
        :after-read="afterReadvideo1"
        accept="video/*"
      >
        <van-button icon="plus" type="primary" />
      </van-uploader>
    </div>
    <div class="cut" />
    <div class="info">周边环境图片（选填）</div>
    <div class="wword">
      <div>请拍摄周边环境图片</div>
    </div>
    <div class="picup">
      <van-uploader
        v-model="fileList4"
        :max-count="9"
        :after-read="afterRead4"
        @delete="deleteimg4"
      />
    </div>
    <div class="cut" />
    <div class="info">周边环境视频（选填）</div>
    <div class="wword">
      <div>请拍摄周边环境视频</div>
    </div>
    <div class="picup">
      <van-uploader
        v-model="videolist2"
        :max-count="1"
        :after-read="afterReadvideo2"
        accept="video/*"
      >
        <van-button icon="plus" type="primary" />
      </van-uploader>
    </div>
    <div v-show="value4 == '整租' || value4 == '合租'" class="cut" />
    <div v-show="value4 == '整租' || value4 == '合租'" class="info">
      设备设施
      <span>(丰富配置，可适当提高租赁价格)</span>
    </div>
    <div v-show="value4 == '整租'" class="tipcard">
      <span
        v-for="item in faclist1"
        ref="fac1"
        :key="item"
        @click="facchoose1($event)"
        >{{ item }}</span
      >
      <span ref="clearfac1" @click="clearfacchoose1($event)">无设备</span>
    </div>
    <div v-show="value4 == '合租'" class="tipcard">
      <span
        v-for="item in faclist2"
        ref="fac2"
        :key="item"
        @click="facchoose2($event)"
        >{{ item }}</span
      >
      <span ref="clearfac2" @click="clearfacchoose2($event)">无设备</span>
    </div>
    <div class="cut" />
    <div class="info">
      房东推荐
      <span>(详细介绍可更快出租)</span>
    </div>
    <div class="tipcard">
      <span
        v-for="item in recommendlist"
        ref="rec"
        :key="item"
        @click="recommendchoose($event)"
        >{{ item }}</span
      >
    </div>
    <div class="cut" />
    <div class="info">
      个人偏好
      <span>(系统自动匹配适合的租客)</span>
    </div>
    <div class="tipcard">
      <span
        v-for="item in hablist"
        ref="hab"
        :key="item"
        @click="habchoose($event)"
        >{{ item }}</span
      >
      <span ref="clearhab" @click="clearhabchoose($event)">无要求</span>
    </div>
    <div class="btn">
      <van-button type="default" @click="jump">提交</van-button>
    </div>
    <van-popup v-model="showarea" position="bottom" :style="{ height: '35%' }">
      <van-area
        title="地区选择"
        visible-item-count="4"
        :area-list="areaList"
        @confirm="onConfirmarea"
        @cancel="onCancelarea"
      />
    </van-popup>
    <van-popup v-model="show1" position="bottom" :style="{ height: '35%' }">
      <van-picker
        show-toolbar
        title="房间户型"
        visible-item-count="4"
        :columns="columns1"
        @confirm="onConfirm1"
        @cancel="onCancel1"
      />
    </van-popup>
    <van-popup v-model="show2" position="bottom" :style="{ height: '35%' }">
      <van-picker
        show-toolbar
        title="房间楼层"
        visible-item-count="4"
        :columns="columns2"
        @confirm="onConfirm2"
        @cancel="onCancel2"
      />
    </van-popup>
    <van-popup v-model="show3" position="bottom" :style="{ height: '35%' }">
      <van-picker
        show-toolbar
        title="电梯"
        visible-item-count="4"
        :columns="columns3"
        @confirm="onConfirm3"
        @cancel="onCancel3"
      />
    </van-popup>
    <van-popup v-model="show4" position="bottom" :style="{ height: '35%' }">
      <van-picker
        show-toolbar
        title="合/整租"
        visible-item-count="4"
        :columns="columns4"
        @confirm="onConfirm4"
        @cancel="onCancel4"
      />
    </van-popup>
    <van-popup v-model="show5" position="bottom" :style="{ height: '35%' }">
      <van-picker
        show-toolbar
        title="付款方式"
        visible-item-count="4"
        :columns="columns5"
        @confirm="onConfirm5"
        @cancel="onCancel5"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { getUserInfo } from "../../apis/user.js";
import { getToken, getVideoToken } from "../../apis/house";
import local from "../../utils/local.js";
import { dataURLtoFile, uuid } from "../../utils/help.js";
import { idcardUp } from "../../apis/user.js";
import { changeUtils } from "../../utils/change.js";
import { getEdithousedetail, housechange } from "../../apis/house.js";
import { getUserId } from "@/utils/auth";
const qiniu = require("qiniu-js");
export default {
  data() {
    return {
      areaList,
      fileList: [],
      fileList2: [],
      showarea: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      valuearea: "请选择",
      value1: "请选择",
      value2: "请选择",
      value3: "请选择",
      value4: "请选择",
      value5: "请选择",
      columns1: ["1居室", "2居室", "3居室", "4居室", "5居室及以上"],
      columns2: ["低层1-7层", "中层8-16层", "高层17层及以上"],
      columns3: ["有电梯", "无电梯"],
      columns4: ["合租", "整租"],
      columns5: ["月付", "季付", "半年付", "年付"],
      housemsg: { subdistrict: "", price: "", houseAcre: "" },
      token: "",
      videotoken: "",
      flag: true,
      pass: true,
      idcardUrl: "",

      fileList3: [],
      fileList4: [],
      videolist1: [],
      videolist2: [],
      upImg: [],
      faclist1: [
        "电视",
        "洗衣机",
        "空调",
        "冰箱",
        "沙发",
        "热水器",
        "燃气灶",
        "茶几",
        "床",
        "衣柜",
        "书桌",
        "独卫",
        "带阳台",
      ],
      faclist2: ["电视", "洗衣机", "空调", "冰箱", "沙发", "热水器", "燃气灶"],
      recommendlist: [
        "精装修",
        "近商场",
        "近地铁",
        "近公交",
        "通风好",
        "采光好",
        "隔音好",
        "南北通透",
        "有车位",
        "独立阳台",
        "电梯房",
        "独卫",
        "智能锁",
        "配套齐全",
        "首次出租",
        "随时看房",
        "押一付一",
        "拎包入住",
      ],
      hablist: [
        "单身",
        "情侣",
        "夫妻",
        "男女均可",
        "年轻人",
        "干净整洁",
        "作息正常",
        "不吸烟",
        "不养宠物",
        "工作稳定",
        "企业白领",
        "养宠物",
      ],
      choosefaclist: [],
      chooserecommendlist: [],
      choosehablist: [],
      surroundImg: [],
    };
  },
  created() {
    this.housemsg.houseId = this.$route.query.houseId;
    this.gethouseinfo();
    this.getInfo();
    this.getqntoken();
    this.getqnVideotoken();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    jump() {
      if (this.flag) {
        if (
          !this.housemsg.houseProperty ||
          !this.housemsg.regionChoose ||
          !this.housemsg.subdistrict ||
          !this.housemsg.houseType ||
          !this.housemsg.floor ||
          !this.housemsg.hasElevator ||
          !this.housemsg.rentalWay ||
          !this.housemsg.houseAcre
        ) {
          this.$toast("您有未填写项");
        } else if (
          this.housemsg.rentalWay == "2" &&
          this.housemsg.price == ""
        ) {
          this.$toast("您有未填写项");
        } else if (
          this.housemsg.rentalWay == "2" &&
          this.housemsg.housePaymentMethod == ""
        ) {
          this.$toast("您有未填写项");
        } else {
          if (this.upImg.length != "0") {
            const arr1 = [];
            const arr2 = [];
            const arr3 = [];
            for (let i = 0; i < this.choosefaclist.length; i++) {
              arr1[i] = changeUtils.getHouseService(this.choosefaclist[i]);
            }
            for (let i = 0; i < this.chooserecommendlist.length; i++) {
              arr2[i] = changeUtils.getRecommend(this.chooserecommendlist[i]);
            }
            for (let i = 0; i < this.choosehablist.length; i++) {
              arr3[i] = changeUtils.getPreference(this.choosehablist[i]);
            }
            this.housemsg.houseService = arr1.join(",");
            this.housemsg.recommend = arr2.join(",");
            this.housemsg.preference = arr3.join(",");
            this.housemsg.houseImages = this.upImg.join(",");
            this.housemsg.surroundingsImages = this.surroundImg.join(",");
            housechange(this.housemsg).then((res) => {
              console.log("提交", res);
              if (res.code === 200 || res.code === 201) {
                this.$toast.success("修改成功");
                this.$router.push({ path: "/home/me" });
              } else {
                this.$toast.fail(res.msg);
              }
            });
          } else {
            this.$toast("您的房屋照片未上传");
          }
        }
      } else {
        this.$toast("身份证信息未通过");
      }
    },
    getInfo() {
      const userId = getUserId();
      getUserInfo({ userId: userId }).then((res) => {
        local.set("userInfo", JSON.stringify(res.result));
        if (res.result.realNameAuthStatus === 1) {
          this.pass = false;
          this.flag = true;
        }
      });
    },
    async getqntoken() {
      await getToken().then((res) => {
        local.set("qntoken", res.result.token);
        this.token = local.get("qntoken");
      });
    },
    async getqnVideotoken() {
      await getVideoToken().then((res) => {
        this.videotoken = local.get("qntoken");
        local.set("qnVideotoken", res.result.token);
      });
    },
    async gethouseinfo() {
      await getEdithousedetail({
        houseId: this.housemsg.houseId,
      }).then((response) => {
        console.log(response.result);
        this.housemsg.subdistrict = response.result.subdistrict;
        this.housemsg.houseAcre = response.result.houseAcre;
        this.housemsg.regionChoose = response.result.regionChoose;
        this.valuearea = response.result.regionChoose;
        this.housemsg.houseType = response.result.houseType;
        this.housemsg.floor = response.result.floor;
        this.housemsg.hasElevator = response.result.hasElevator;
        this.housemsg.rentalWay = response.result.rentalWay;
        this.housemsg.houseProperty = response.result.houseProperty;
        this.upImg = response.result.house_images;
        this.surroundImg = response.result.surroundingsImages;
        this.housemsg.indoorVideo = response.result.indoorVideo;
        this.housemsg.surroundingsVideo = response.result.surroundingsVideo;
        this.choosefaclist = response.result.houseService;
        this.chooserecommendlist = response.result.recommend;
        this.choosehablist = response.result.preference;
        if (this.housemsg.houseProperty) {
          const obj = { url: "", isImage: true };
          obj.url = this.$imgUrl + this.housemsg.houseProperty;
          this.fileList.push(obj);
        }
        if (this.upImg.length > 0) {
          this.upImg.forEach((e) => {
            const obj = { url: "", isImage: true };
            obj.url = this.$imgUrl + e;
            this.fileList3.push(obj);
          });
        }
        if (this.surroundImg.length > 0) {
          this.surroundImg.forEach((e) => {
            const obj = { url: "", isImage: true };
            obj.url = this.$imgUrl + e;
            this.fileList4.push(obj);
          });
        }
        if (this.housemsg.indoorVideo) {
          const innerVideo = { url: "" };
          innerVideo.url = this.$videoUrl + this.housemsg.innerVideo;
          this.videolist1.push(innerVideo);
        }
        if (this.housemsg.surroundingsVideo) {
          const surroundVideo = { url: "" };
          surroundVideo.url = this.$videoUrl + this.housemsg.surroundingsVideo;
          this.videolist2.push(surroundVideo);
        }
        if (this.housemsg.houseType == 1) {
          this.value1 = "1居室";
        } else if (this.housemsg.houseType == 2) {
          this.value1 = "2居室";
        } else if (this.housemsg.houseType == 3) {
          this.value1 = "3居室";
        } else if (this.housemsg.houseType == 4) {
          this.value1 = "4居室";
        } else if (this.housemsg.houseType == 5) {
          this.value1 = "5居室及以上";
        }
        if (this.housemsg.floor == 1) {
          this.value2 = "低层/1-7层";
        } else if (this.housemsg.floor == 2) {
          this.value2 = "中层/8-16层";
        } else if (this.housemsg.floor == 3) {
          this.value2 = "高层/17层及以上";
        }
        if (this.housemsg.hasElevator == 1) {
          this.value3 = "有电梯";
        } else if (this.housemsg.hasElevator == 2) {
          this.value3 = "无电梯";
        }
        if (this.housemsg.rentalWay == 1) {
          this.value4 = "合租";
          if (this.choosefaclist.length > 0) {
            this.$nextTick(() => {
              this.$refs.fac2.forEach((e) => {
                this.choosefaclist.forEach((item) => {
                  if (e.innerText == item) {
                    e.classList.add("active");
                  }
                });
              });
            });
          }
        } else if (this.housemsg.rentalWay == 2) {
          this.value4 = "整租";
          if (this.choosefaclist.length > 0) {
            this.$nextTick(() => {
              this.$refs.fac1.forEach((e) => {
                this.choosefaclist.forEach((item) => {
                  if (e.innerText == item) {
                    e.classList.add("active");
                  }
                });
              });
            });
          }
          this.housemsg.price = response.result.leasePrice;
          this.housemsg.housePaymentMethod = response.result.housePaymentMethod;
          if (this.housemsg.housePaymentMethod == 1) {
            this.value5 = "月付";
          } else if (this.housemsg.housePaymentMethod == 2) {
            this.value5 = "季付";
          } else if (this.housemsg.housePaymentMethod == 3) {
            this.value5 = "半年付";
          } else if (this.housemsg.housePaymentMethod == 4) {
            this.value5 = "年付";
          }
        }

        if (this.chooserecommendlist.length > 0) {
          this.$nextTick(() => {
            this.$refs.rec.forEach((e) => {
              this.chooserecommendlist.forEach((item) => {
                if (e.innerText == item) {
                  e.classList.add("active");
                }
              });
            });
          });
        }
        if (this.choosehablist.length > 0) {
          this.$nextTick(() => {
            this.$refs.hab.forEach((e) => {
              this.choosehablist.forEach((item) => {
                if (e.innerText == item) {
                  e.classList.add("active");
                }
              });
            });
          });
        }
      });
    },
    afterRead(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          _this.housemsg.houseProperty = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterRead2(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          _this.idcardUrl = res.key;
          idcardUp({ idCardImage: res.key }).then((rep) => {
            if (rep.code == 2030 || rep.code == 2045) {
              _this.$toast(rep.msg);
              _this.$refs.idcard.style.border = "1px solid #d43b33";
            } else if (rep.code == 200) {
              _this.flag = true;
              _this.$refs.idcard.style.border = "none";
            }
          });
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "idcard/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    showmoney() {
      if (this.value4 == "请选择" || this.value4 == "合租") {
        return "display:none";
      } else if (this.value4 == "整租") {
        return "display:";
      }
    },
    showPopup1() {
      this.show1 = true;
    },
    showPopup2() {
      this.show2 = true;
    },
    showPopup3() {
      this.show3 = true;
    },
    showPopup4() {
      this.show4 = true;
    },
    showPopup5() {
      this.show5 = true;
    },
    onConfirmarea(value) {
      this.valuearea = "";
      for (const item of value) {
        this.valuearea = this.valuearea + item.name;
      }
      this.housemsg.regionChoose = this.valuearea;
      this.showarea = false;
      if (this.value1 == "请选择") {
        this.show1 = true;
      }
    },
    onCancelarea() {
      this.showarea = false;
    },
    onConfirm1(value) {
      if (value == "1居室") {
        this.housemsg.houseType = 1;
      } else if (value == "2居室") {
        this.housemsg.houseType = 2;
      } else if (value == "3居室") {
        this.housemsg.houseType = 3;
      } else if (value == "4居室") {
        this.housemsg.houseType = 4;
      } else if (value == "5居室及以上") {
        this.housemsg.houseType = 5;
      }
      this.value1 = value;
      this.show1 = false;
      if (this.value2 == "请选择") {
        this.show2 = true;
      }
    },
    onCancel1() {
      this.show1 = false;
    },
    onConfirm2(value) {
      if (value == "低层1-7层") {
        this.housemsg.floor = 1;
      } else if (value == "中层8-16层") {
        this.housemsg.floor = 2;
      } else if (value == "高层17层及以上") {
        this.housemsg.floor = 3;
      }
      this.value2 = value;
      this.show2 = false;
      if (this.value3 == "请选择") {
        this.show3 = true;
      }
    },
    onCancel2() {
      this.show2 = false;
    },
    onConfirm3(value) {
      if (value == "有电梯") {
        this.housemsg.hasElevator = 1;
      } else if (value == "无电梯") {
        this.housemsg.hasElevator = 2;
      }
      this.value3 = value;
      this.show3 = false;
      if (this.value4 == "请选择") {
        this.show4 = true;
      }
    },
    onCancel3() {
      this.show3 = false;
    },
    onConfirm4(value) {
      if (value == "合租") {
        this.housemsg.rentalWay = 1;
      } else if (value == "整租") {
        this.housemsg.rentalWay = 2;
      }
      this.value4 = value;
      this.show4 = false;
      if (this.value5 == "请选择" && value == "整租") {
        this.show5 = true;
      }
    },
    onCancel4() {
      this.show4 = false;
    },
    onConfirm5(value) {
      if (value == "月付") {
        this.housemsg.housePaymentMethod = 1;
      } else if (value == "季付") {
        this.housemsg.housePaymentMethod = 2;
      } else if (value == "半年付") {
        this.housemsg.housePaymentMethod = 3;
      } else if (value == "年付") {
        this.housemsg.housePaymentMethod = 4;
      }
      this.value5 = value;
      this.show5 = false;
    },
    onCancel5() {
      this.show5 = false;
    },

    facchoose1(event) {
      if (event.currentTarget.classList[0] === "active") {
        const i = this.choosefaclist.indexOf(event.currentTarget.innerText);
        this.choosefaclist.splice(i, 1);
        event.currentTarget.classList.remove("active");
      } else {
        event.currentTarget.classList.add("active");
        this.choosefaclist.push(event.currentTarget.innerText);
        this.$refs.clearfac1.classList.remove("active");
      }
    },
    clearfacchoose1(event) {
      if (event.currentTarget.classList[0] === "active") {
        event.currentTarget.classList.remove("active");
      } else {
        event.currentTarget.classList.add("active");
        this.choosefaclist = [];
        this.$refs.fac1.forEach((item) => {
          item.classList.remove("active");
        });
      }
    },
    facchoose2(event) {
      if (event.currentTarget.classList[0] === "active") {
        const i = this.choosefaclist.indexOf(event.currentTarget.innerText);
        this.choosefaclist.splice(i, 1);
        event.currentTarget.classList.remove("active");
      } else {
        event.currentTarget.classList.add("active");
        this.choosefaclist.push(event.currentTarget.innerText);
        this.$refs.clearfac2.classList.remove("active");
      }
    },
    clearfacchoose2(event) {
      if (event.currentTarget.classList[0] === "active") {
        event.currentTarget.classList.remove("active");
      } else {
        event.currentTarget.classList.add("active");
        this.choosefaclist = [];
        this.$refs.fac2.forEach((item) => {
          item.classList.remove("active");
        });
      }
    },
    recommendchoose(event) {
      if (event.currentTarget.classList[0] === "active") {
        const i = this.chooserecommendlist.indexOf(
          event.currentTarget.innerText
        );
        this.chooserecommendlist.splice(i, 1);
        event.currentTarget.classList.remove("active");
      } else {
        event.currentTarget.classList.add("active");
        this.chooserecommendlist.push(event.currentTarget.innerText);
      }
    },
    habchoose(event) {
      if (event.currentTarget.classList[0] === "active") {
        const i = this.choosehablist.indexOf(event.currentTarget.innerText);
        this.choosehablist.splice(i, 1);
        event.currentTarget.classList.remove("active");
      } else {
        event.currentTarget.classList.add("active");
        this.choosehablist.push(event.currentTarget.innerText);
        this.$refs.clearhab.classList.remove("active");
      }
    },
    clearhabchoose(event) {
      if (event.currentTarget.classList[0] === "active") {
        event.currentTarget.classList.remove("active");
      } else {
        event.currentTarget.classList.add("active");
        this.choosehablist = [];
        this.$refs.hab.forEach((item) => {
          item.classList.remove("active");
        });
      }
    },
    afterRead3(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          file.key = res.key;
          _this.upImg.push(res.key);
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    deleteimg3(file) {
      const i = this.upImg.indexOf(file.key);
      this.upImg.splice(i, 1);
    },
    afterRead4(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          file.key = res.key;
          _this.surroundImg.push(res.key);
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    deleteimg4(file) {
      const i = this.surroundImg.indexOf(file.key);
      this.surroundImg.splice(i, 1);
    },
    afterReadvideo1(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
      };
      const observer = {
        complete(res) {
          _this.housemsg.indoorVideo = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "video/" + uuid(),
        this.videotoken,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterReadvideo2(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
      };
      const observer = {
        complete(res) {
          _this.housemsg.surroundingsVideo = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "video/" + uuid(),
        this.videotoken,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
  },
};
</script>

<style lang="less" scoped>
.info {
  margin: 10px 15px 20px;
  font-size: 17px;
  font-weight: bold;
  color: #333;
  span {
    font-size: 13px;
    color: #ccc;
    font-weight: normal;
  }
}
.passreal {
  font-size: 13px;
  color: #45b7cb;
  margin: 0 15px 20px;
}
.picup {
  margin: 0 15px;
  .idcardup {
    width: 80px;
  }
}
.idcard {
  margin: 0 15px;
  .pass {
    color: #45b7cb;
  }
  .unpass {
    color: #d43b33;
    button {
      margin-left: 10px;
      background-color: #45b7cb;
      border: 1px solid #45b7cb;
      font-size: 14px;
      color: #fff;
    }
  }
}
.houseinfo {
  margin: 0 15px;
  .headinfo {
    margin: 10px 0 15px;
    font-size: 17px;
    font-weight: bold;
  }
  .other {
    border-bottom: none !important;
    /deep/.van-field {
      padding-left: 5px !important;
    }
    .van-cell {
      &::after {
        border: none;
      }
    }
  }
  .detailinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 23px;
    margin-top: 23px;
    > span {
      margin-right: 5px;
      display: block;
      color: #d43b33;
    }
    .tword {
      text-align: center;
      height: 24px;
      width: 120px;
    }
    .dw {
      margin: 0px;
      display: inline-block;
      color: #999;
      font-size: 12px;
      .up {
        font-size: 9px;
        vertical-align: super;
        transform: scale(calc(9 / 12));
      }
    }
    /deep/.van-cell {
      padding: 0px;
      margin-left: 20px;
      font-size: 16px;
      .van-cell__value {
        color: #999;
      }
    }
    /deep/.van-field {
      .van-field__control {
        color: #999;
      }
      input {
        &::placeholder {
          color: #999;
        }
      }
    }
  }
}

.cut {
  height: 10px;
  width: 100%;
  background-color: #f1f1f1;
  margin-bottom: 10px;
}
.wword {
  margin: 0 15px;
  font-size: 14px;
  color: #d3d3d3;
  div {
    margin-bottom: 5px;
  }
}
.picup {
  margin: 0 11px;
  margin-top: 10px;
  margin-bottom: 10px;
  .van-button {
    width: 80px;
    height: 80px;
    background-color: #f7f8fa;
    border: none;
    color: #dcdee0;
    .van-icon {
      font-size: 40px;
    }
  }
}
.tipcard {
  margin: 0 15px;
  display: flex;
  flex-wrap: wrap;
  span {
    display: inline-block;
    width: 22%;
    height: 30px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #666;
    &:nth-child(4n) {
      margin-right: 0px;
    }
  }
  .active {
    background-color: #45b7cb;
    color: #fff;
  }
}
/deep/.van-picker {
  .van-picker__cancel,
  .van-picker__confirm {
    color: #5ec1d2;
  }
}
.active {
  font-size: 35px;
  color: #45b7cb;
}

.btn {
  width: 100%;
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
  .van-button {
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
    border-radius: 25px;
  }
}
</style>
